<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>我的空间 | 我的音乐</title>
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/music.css" />
</head>

<body>
    <div class="nav">
        <img src="../img/头像.jpg" alt="logo 图">
        <span class="title">个人空间</span>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
            <a href="information.html" ><p>个人信息</p></a>
            <a href="interest.html"><p>兴趣爱好</p></a>
            <a href="food.html" ><p>生活记录</p></a>
            <a href="trip.html" ><p>我的相册</p></a>
            <a href="music.html" ><p>我的歌单</p></a>
            <a href="../index.html" ><p>返回首页</p></a>
    </div>

    <div id="main">
        <div class="main1">
            <div class="mod_data">
                <div class="data__cover">
                    <img src="../img/2.png" />
                </div>
                <div class="data__photo">
                    <h1>我喜欢的音乐</h1><br />
                    <p> 用户：与沉书_ &nbsp;2018-3-24 &nbsp;歌单</p><br />
                    <div class="buttons">
                        <button>
                            <img src="../img/Play Green Button.png" />
                            <p>播放</p>
                        </button>
                        <button>
                            <img src="../img/Play Blue Button.png" />
                            <p>收藏</p>
                        </button>
                        <button>
                            <img src="../img/Import Audio Document.png" />
                            <p>分享</p>
                        </button>
                        <button>
                            <img src="../img/Star.png" />
                            <p>下载</p>
                        </button>
                    </div>
                </div>
            </div>
            <div class="detail_layout">
                <div class="mod_songlist ">
                    <ul class="songlist__header">
                        <li class="songlist__header_name">歌曲</li>
                        <li class="songlist__header_author">歌手</li>
                        <li class="songlist__header_time">时长</li>
                    </ul>
                    <ol class="songlist__list">

                        <li>
                            <div class="songlist__songname">一生所爱

                                <div class="play">
                                    <ol>
                                        <li><a href="https://music.163.com/#/song?id=25727660">
                                                <img src="../img/Play Green Button.png" />
                                                <img src="../img/Play Blue Button.png" />
                                                <img src="../img/Import Audio Document.png" />
                                                <img src="../img/Star.png" /></a></li>
                                    </ol>
                                </div>
                            </div>
                            <div class="songlist__artist">舒淇</div>
                            <div class="songlist__time">03:13</div>
                        </li>
                        <li>
                            <div class="songlist__songname">山鬼
                                <div class="play">
                                    <ol>
                                        <li><a href="https://music.163.com/#/song?id=28496172">
                                                <img src="../img/Play Green Button.png" />
                                                <img src="../img/Play Blue Button.png" />
                                                <img src="../img/Import Audio Document.png" />
                                                <img src="../img/Star.png" /></a></li>
                                    </ol>
                                </div>
                            </div>
                            <div class="songlist__artist">Winky诗</div>
                            <div class="songlist__time">04:48</div>
                        </li>
                        <li>
                            <div class="songlist__songname">Can We Kiss Forever（翻自 Kina）
                                <div class="play">
                                    <ol>
                                        <li><a href="https://music.163.com/#/song?id=1392956510">
                                                <img src="../img/Play Green Button.png" />
                                                <img src="../img/Play Blue Button.png" />
                                                <img src="../img/Import Audio Document.png" />
                                                <img src="../img/Star.png" /></a></li>
                                    </ol>
                                </div>
                            </div>
                            <div class="songlist__artist">aEZi</div>
                            <div class="songlist__time">02:15</div>
                        </li>
                        <li>
                            <div class="songlist__songname">最爱
                                <div class="play">
                                    <ol>
                                        <li><a href="https://music.163.com/#/song?id=5278470">
                                                <img src="../img/Play Green Button.png" />
                                                <img src="../img/Play Blue Button.png" />
                                                <img src="../img/Import Audio Document.png" />
                                                <img src="../img/Star.png" /></a></li>
                                    </ol>
                                </div>
                            </div>
                            <div class="songlist__artist">周慧敏</div>
                            <div class="songlist__time">04:25</div>
                        </li>
                        <li>
                            <div class="songlist__songname">盛夏的果实
                                <div class="play">
                                    <ol>
                                        <li>
                                            <a href="https://music.163.com/#/song?id=277382">
                                                <img src="../img/Play Green Button.png" />
                                                <img src="../img/Play Blue Button.png" />
                                                <img src="../img/Import Audio Document.png" />
                                                <img src="../img/Star.png" /></a></li>
                                    </ol>
                                </div>
                            </div>
                            <div class="songlist__artist">莫文蔚</div>
                            <div class="songlist__time">04:10</div>
                        </li>
                        <li>
                            <div class="songlist__songname">当你老了
                                <div class="play">
                                    <ol>
                                        <li>
                                            <a href="https://music.163.com/#/song?id=30621954">
                                                <img src="../img/Play Green Button.png" />
                                                <img src="../img/Play Blue Button.png" />
                                                <img src="../img/Import Audio Document.png" />
                                                <img src="../img/Star.png" /></a></li>
                                    </ol>
                                </div>
                            </div>
                            <div class="songlist__artist">莫文蔚</div>
                            <div class="songlist__time">03:18</div>
                        </li>
                        <li>
                            <div class="songlist__songname">慢慢喜欢你
                                <div class="play">
                                    <ol>
                                        <li>
                                            <a href="https://music.163.com/#/song?id=541687281">
                                                <img src="../img/Play Green Button.png" />
                                                <img src="../img/Play Blue Button.png" />
                                                <img src="../img/Import Audio Document.png" />
                                                <img src="../img/Star.png" /></a></li>
                                    </ol>
                                </div>
                            </div>
                            <div class="songlist__artist">莫文蔚</div>
                            <div class="songlist__time">03:41</div>
                        </li>
                        <li>
                            <div class="songlist__songname">浮夸
                                <div class="play">
                                    <ol>
                                        <li>
                                            <a href="https://music.163.com/#/song?id=66282">
                                                <img src="../img/Play Green Button.png" />
                                                <img src="../img/Play Blue Button.png" />
                                                <img src="../img/Import Audio Document.png" />
                                                <img src="../img/Star.png" /></a></li>
                                    </ol>
                                </div>
                            </div>
                            <div class="songlist__artist">陈奕迅</div>
                            <div class="songlist__time">04:43</div>
                        </li>
                        <li>
                            <div class="songlist__songname">爱情转移
                                <div class="play">
                                    <ol>
                                        <li>
                                            <a href="https://music.163.com/#/song?id=65536">
                                                <img src="../img/Play Green Button.png" />
                                                <img src="../img/Play Blue Button.png" />
                                                <img src="../img/Import Audio Document.png" />
                                                <img src="../img/Star.png" /></a></li>
                                    </ol>
                                </div>
                            </div>
                            <div class="songlist__artist">陈奕迅</div>
                            <div class="songlist__time">04:19</div>
                        </li>
                        <li>
                            <div class="songlist__songname">世间美好与你环环相扣
                                <div class="play">
                                    <ol>
                                        <li>
                                            <a href="https://music.163.com/#/song?id=1363948882">
                                                <img src="../img/Play Green Button.png" />
                                                <img src="../img/Play Blue Button.png" />
                                                <img src="../img/Import Audio Document.png" />
                                                <img src="../img/Star.png" /></a></li>
                                    </ol>
                                </div>
                            </div>
                            <div class="songlist__artist">柏松</div>
                            <div class="songlist__time">03:11</div>
                        </li>
                        <li>
                            <div class="songlist__songname">One Last Kiss
                                <div class="play">
                                    <ol>
                                        <li>
                                            <a href="https://music.163.com/#/song?id=1824020871">
                                                <img src="../img/Play Green Button.png" />
                                                <img src="../img/Play Blue Button.png" />
                                                <img src="../img/Import Audio Document.png" />
                                                <img src="../img/Star.png" /></a></li>
                                    </ol>
                                </div>
                            </div>
                            <div class="songlist__artist">宇多田ヒカル </div>
                            <div class="songlist__time">04:09</div>
                        </li>

                    </ol>
                </div>
                <div class="other_part">
                    <h2>歌单简介</h2>
                    <p>当你开心时候是在享受音乐，
                    当你不开心的时候你会明白歌词的含义。
                    </p>
                    <h2>该用户的其他歌单</h2>
                    <div class="other_zhuanji">
                        <div>
                            <img src="../img/music1.jpg" />
                            <p>小舟</p>
                        </div>
                        <div>
                            <img src="../img/music2.jpg" />
                            <p>从此</p>
                        </div>
                        <div>
                            <img src="../img/music3.jpg" />
                            <p>逝。</p>
                        </div>
                        <div>
                            <img src="../img/music4.jpg" />
                            <p>江海</p>
                        </div>
                        <div>
                            <img src="../img/music5.jpg" />
                            <p>寄</p>
                        </div>
                        <div>
                            <img src="../img/music6.jpg" />
                            <p>余生。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
 	<div id="footer">
		<p>
			<a href="index.html">个人信息</a><span>|</span>
			<a href="interest.html">兴趣爱好</a><span>|</span>
			<a href="food.html">美食生活</a><span>|</span>
			<a href="trip.html">背包旅行</a>
		</p>
        <p>© 2023 By <a href="../welcome.html" >Sukie</a>.</p>
	</div>

</body>

</div>
    <script>
        //鼠标点击出现爱心特效  这部分特效是从一个网页搬过来的  觉得挺好看的
        (function (window, document, undefined) {
            var hearts = [];
            window.requestAnimationFrame = (function () {
                return window.requestAnimationFrame ||
				window.webkitRequestAnimationFrame ||
				window.mozRequestAnimationFrame ||
				window.oRequestAnimationFrame ||
				window.msRequestAnimationFrame ||
				function (callback) {
				    setTimeout(callback, 1000 / 60);
				}
            })();
            init();
            function init() {
                css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
                attachEvent();
                gameloop();
            }
            function gameloop() {
                for (var i = 0; i < hearts.length; i++) {
                    if (hearts[i].alpha <= 0) {
                        document.body.removeChild(hearts[i].el);
                        hearts.splice(i, 1);
                        continue;
                    }
                    hearts[i].y--;
                    hearts[i].scale += 0.004;
                    hearts[i].alpha -= 0.013;
                    hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
                }
                requestAnimationFrame(gameloop);
            }
            function attachEvent() {
                var old = typeof window.onclick === "function" && window.onclick;
                window.onclick = function (event) {
                    old && old();
                    createHeart(event);
                }
            }
            function createHeart(event) {
                var d = document.createElement("div");
                d.className = "heart";
                hearts.push({
                    el: d,
                    x: event.clientX - 5,
                    y: event.clientY - 5,
                    scale: 1,
                    alpha: 1,
                    color: randomColor()
                });
                document.body.appendChild(d);
            }
            function css(css) {
                var style = document.createElement("style");
                style.type = "text/css";
                try {
                    style.appendChild(document.createTextNode(css));
                } catch (ex) {
                    style.styleSheet.cssText = css;
                }
                document.getElementsByTagName('head')[0].appendChild(style);
            }
            function randomColor() {
                return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
            }
        })(window, document);
    </script>

</html>